<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../static/css/main-left.css">
    <script type="text/javascript" src="../static/echarts/echarts.min.js"></script>
    <script type="text/javascript" src="../static/echarts/china.js"></script>
    <script type="text/javascript" src="../static/js/customed.js"></script>
    <script type="text/javascript" src="../static/js/data.js"></script>
    <style>
        body {
            background-image: url("../static/images/222.webp");
        }
    </style>
</head>
<body>
<div th:replace="main::#headerbar"></div>
<div id="sidbar" class="container-fluid row">
    <div class="row col-md-3">
        <div class="col-md-9">
            <ul id="main-nav" class="nav nav-tabs nav-stacked" style="">
                <li class="active">
                    <a href="/toMain">
                        <i class="glyphicon glyphicon-th-large"></i>
                        首页
                    </a>
                </li>
                <li>
                    <a href="#systemSetting" class="nav-header  collapsed" data-toggle="collapse">
                        <i class="glyphicon glyphicon-cog"></i>
                        系统管理
                        <span class="pull-right glyphicon glyphicon-chevron-down"></span>
                    </a>
                    <ul id="systemSetting" class="nav nav-list collapse secondmenu   " style="height: 0px;">
                        <li><a href="/user/list"><i class="glyphicon glyphicon-user"></i>用户管理</a></li>
                        <!--                        <li><a href="#"><i class="glyphicon glyphicon-edit"></i>修改密码</a></li>-->
                        <li><a href="/logoSystem"><i class="glyphicon glyphicon-eye-open"></i>日志查看</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#userMeun" class="nav-header collapsed" data-toggle="collapse">
                        <i class="glyphicon glyphicon-credit-card"></i>
                        疫情数据管理
                        <span class="pull-right glyphicon glyphicon-chevron-down"></span>
                    </a>
                    <ul id="userMeun" class="nav nav-list collapse secondmenu" style="height: 0px;">
                        <li><a href="/MessageManager"><i class="glyphicon glyphicon-user"></i>疫情数据管理</a></li>
                        <li><a href="#"><i class="glyphicon glyphicon-eye-open"></i>日志查看</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#articleMenu" class="nav-header collapsed" data-toggle="collapse">
                        <i class="glyphicon glyphicon-globe"></i>
                        疫情爬取管理
                        <span class="pull-right glyphicon glyphicon-chevron-down"></span>
                    </a>
                    <ul id="articleMenu" class="nav nav-list collapse secondmenu" style="height: 0px;">
                        <li><a href="/MessagePQ"><i class="glyphicon glyphicon-user"></i>国内疫情爬取</a></li>
                        <li><a href="/MessagePQ2"><i class="glyphicon glyphicon-th-list"></i>国外疫情爬取</a></li>
                    </ul>
                </li>

                <li>
                    <a href="#" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
                        <i class="glyphicon glyphicon-fire "></i>
                        关于疫情系统
                    </a>
                </li>
            </ul>
        </div>
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                            疫情信息系统
                        </h4>
                    </div>
                    <div class="modal-body">
                        姓名： 和学博
                        学号： 18027240065
                        计算机科学与技术软件外包1班
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                            关闭
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <script>
            $(function () {
                $('#myModal').modal('hide')
            });
        </script>
    </div>
    <div class="col-md-9" style="border: 0px solid #000000;margin: 0 auto;">
        <div class="showTime" ></div>
        <br>
        <div class="page-header"><h2 th:text="国内疫情情况">国内疫情情况如下</h2></div>
        <br>

        <div id="graph4" style="width: 900px;height:600px;"></div>
        <script th:inline="javascript">
            var dataStr = [[${mapData}]];
            option = {
                title: {
                    text: '疫情地图',
                    subtext: '仅供参考',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                series: [
                    {
                        name: '现存确诊',
                        type: 'map',
                        mapType: 'china',
                        roam: false,
                        label: {
                            normal: {
                                position: 'center',
                                show: true,
                                textStyle: {
                                    color: 'rgba(0,0,0,0.4)'
                                }
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        data: JSON.parse(dataStr)
                    }
                ]
            };
            var chart = echarts.init(document.getElementById("graph4"))
            chart.setOption(option)

        </script>
        <div id="graph2" style="width: 900px;height:500px;"></div>
        <script th:inline="javascript">
            var myChart = echarts.init(document.getElementById('graph2'), 'dark');
            var nameStr = [[${nameList}]];
            var fromAbroadStr = [[${fromAbroadList}]];
            var option = {
                title: {  // 标题组件
                    text: '境外输入省市TOP24'
                },
                tooltip: {  // 提示框组件
                    trigger: 'axis'
                },
                grid: {
                    top: "18%",
                    left: "10%",
                    right: "10%",
                    bottom: "15%"
                     },
                xAxis: {
                    data: JSON.parse(nameStr),
                    type:'category',
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLabel: {
                        show:true,
                        interval: 0,
                        rotate: -30
                    },
                    interval: 0
                },
                yAxis: {
                    type: 'value',
                },
                series: [
                    {
                        name: '境外输入',
                        type: 'bar',
                        barWidth: '30%',
                        data: JSON.parse(fromAbroadStr)
                    }
                ]
            };
            myChart.setOption(option);
        </script>


        <div id="graph1" style="width: 800px;height:500px;"></div>
        <script th:inline="javascript">
            var myChart = echarts.init(document.getElementById('graph1'));
            var dateStr = [[${dateList}]];
            var nowConfirmStr = [[${nowConfirmList}]];
            var option = {
                title: {
                    text: '全国现有确诊趋势'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['现有确诊']
                },
                xAxis: {
                    data: JSON.parse(dateStr)
                    // data: dateStr
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    name: '现有确诊',
                    data: JSON.parse(nowConfirmStr),
                    type: 'line'
                }]
            };
            myChart.setOption(option);
        </script>

        <div id="graph5" style="width: 800px;height:500px;"></div>

        <script th:inline="javascript">
            var myChart = echarts.init(document.getElementById('graph5'));
            var addDateStr = [[${addDateList}]];
            var addConfirmStr = [[${addConfirmList}]];
            var addSuspectStr = [[${addSuspectList}]];
            var option = {
                title: {  // 标题组件
                    text: '全国疫情新增趋势'
                },
                tooltip: {  // 提示框组件
                    trigger: 'axis'
                },
                legend: {  // 曲线含义说明
                    data: ['新增确诊', '新增疑似']
                },
                xAxis: {
                    // 转化为json对象
                    data: JSON.parse(addDateStr)
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    name: '新增确诊',
                    data: JSON.parse(addConfirmStr),
                    type: 'line'
                }, {
                    name: '新增疑似',
                    data: JSON.parse(addSuspectStr),
                    type: 'line'
                }]
            };
            myChart.setOption(option);
        </script>

        <div id="graph3" style="width: 800px;height:500px;"></div>
        <script th:inline="javascript">
            var myChart = echarts.init(document.getElementById('graph3'));
            var str = [[${pieList}]];
            var option = {
                title: {
                    text: '全国现有确诊构成'
                },
                tooltip: {
                    trigger: 'axis'
                },
                series: [
                    {
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: JSON.parse(str)
                    }
                ]
            };
            myChart.setOption(option);
        </script>

    </div>
</div>
</body>
</html>